<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<script type="text/javascript">
    var gene;
    var cohort;

    function showLdPlot() {
        // Get ethnicity
        ethnicity = $("select#ethnicities").val();
        ethnicity = ethnicity.replace(" ", "_");

        // Load the image
        var image = new Image();
        image.alt = cohort;
        // GOTCHA: The first directory name (RSQ or Dprime) used to be assigned to a variable
        // and src below used the variable. However, IE7 was unable to assign the value of the radio button
        // to a variable for an unknown reason. (Yet, this is fine and you can even alert the value fine.)
        image.src ='<html:rewrite page="/images/ld/" />' + $(":radio[name=unit]:checked").val() + '/' + cohort + '/' + ethnicity + '/'
                   + cohort + '_Asthma_' + gene + '.ped.LD.PNG';

        $("#ldPlotModal div#image").empty();
        $("#ldPlotModal div#image").append(image);
    }

    function openLdPlot(name, cohortName, cohortId) {
        gene = name;
        cohort = cohortName;

        // Load the ethnicities
        $("#ldPlotModal div#selectors select").empty();
        $.ajax({
            url: "researchAjax.do",
            data: {request: 'ethnicity',
                   selectedCohort: [cohortId],
                   useName: true},
            success: function(data) {
                $("#ldPlotModal div#selectors select").append(data);
                $("#selectors select option[value=Caucasian]").attr("selected", "selected");

                // Show the plot
                showLdPlot();
            },
            error: function() {
                $("#ldPlotModal div#selectors select").append('<option value="-1">Error on the server. Please re-open the dialog.<\/option>');
            }
        });

        $("#ldPlotModal").dialog("option", "title", cohort);
        $("#ldPlotModal").dialog("option", "height", 'auto');
        $("#ldPlotModal").dialog("open");
    }

    $(document).ready(function() {
        $("#ldPlotModal").dialog({
            autoOpen: false,
            modal: true,
            width: 600,
            position: 'top'
        });

        $("select#ethnicities").change(showLdPlot);
        $(":radio[name=unit]").change(showLdPlot);
    });
</script>
<div id="ldPlotModal">
    <div id="selectors">
        <dl>
            <dt>Ethnicities:</dt>
            <dd>
                <select id="ethnicities" size="8" style="width: 100%;">
                    <option value="-1">Error on the server. Please re-open the dialog.</option>
                </select>
            </dd>
            <dt>Unit:</dt>
            <dd>
                <input type="radio" id="rsq" name="unit" value="RSQ" checked="checked" />
                <label for="rsq">r<sup>2</sup></label>
                <input type="radio" id="dPrime" name="unit" value="Dprime" />
                <label for="dPrime">D'</label>
            </dd>
        </dl>
    </div>
    <div id="image"></div>
</div>
